<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro" >
<head>
    <meta charset="utf-8" >
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>招商项目库</title>

    <!-- JS -->
    <script type="text/javascript" th:src="@{/myconfig/bootstrap/js/jquery.js}"></script>
    <script type="text/javascript" th:src="@{/myconfig/bootstrap/js/bootstrap.min.js}"></script>

    <!-- CSS -->
    <link th:href="@{/myconfig/bootstrap/css/bootstrap.min.css}" type="text/css" rel="stylesheet" media="all">
    <link rel="stylesheet" th:href="@{/myconfig/layui/css/layui.css}" media="all">

    <style>
        body{margin: 10px;}
        .demo-carousel{height: 200px; line-height: 200px; text-align: center;}
        #styleDiv div{
            float: left;
        }
    </style>
</head>
<body>
<!-- 编辑工作计划模态框 -->
<div class="modal fade" id="updatePlanModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" >
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title" id="myModalLabel">
                    工作计划内容修改
                    <input type="text" id="modalPlanId" hidden>
                </h3>
            </div>
            <div class="modal-body">
                <form id="addItemForm">
                    <div style="height: 100%;width: 100%">
                        <div style="width: 100%;height:10%;">
                            事项内容：
                            <textarea id="modalPlanContent" class="form-control" rows="20%" cols="100%"></textarea>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="updatePlan()">修改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!-- 工作计划详情模态框 -->
<div class="modal fade" id="detailPlanModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" >
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title" id="myModalLabel1">
                    工作计划详情
                    <input type="text" id="modalPlanId1" hidden>
                </h3>
            </div>
            <div class="modal-body">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="updatePlan()">添加</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!-- -->
<div class="layui-table-tool-temp" id="mytoolbar">
    <div class="layui-form-item" >
        <form class="layui-form" action="">
            <div class="layui-input-block"  id="styleDiv" style="margin: 0 0 0 5px;width: 100%;float: left;">
                <div class="layui-form">
                    <select name="departmentId" lay-verify="" id="departmentId">
                        <option value="">关联部门</option>
                    </select>
                </div>
                <div class="layui-input-block" style="margin-left: 0px;">
                    <select id="planTypeId">
                        <option></option>
                        <option value = 1>年度</option>
                        <option value = 2>月度</option>
                    </select>
                </div>
                <div class="layui-input-block" style="margin-left: 0px;">
                    <select id="planReleaseStatus">
                        <option></option>
                        <option value = 1>未发布</option>
                        <option value = 2>已发布</option>
                    </select>
                </div>
                <div>
                    <button class="layui-btn" lay-submit lay-filter="formSearch">搜索</button>
                </div>
            </div>

        </form>
    </div>
</div>
<script type="text/html" id="testToolbar">
    <div style="margin-left: 15px;float: left">
        <button class="layui-btn layui-btn-warm" lay-event="addPlan" data-method="setTop" shiro:hasPermission="plan_add">添加工作计划</button>
        <button class="layui-btn layui-btn-normal" lay-event="update" shiro:hasPermission="plan_update">编辑工作计划</button>
        <button class="layui-btn layui-btn-danger" lay-event="delete" shiro:hasPermission="plan_delete">删除工作计划</button>
        <button class="layui-btn layui-btn-normal" lay-event="detail" shiro:hasPermission="plan_detail">查看计划详情</button>
        <button class="layui-btn layui-btn-normal" lay-event="release" shiro:hasPermission="plan_release">发布工作计划</button>
        <button class="layui-btn layui-btn-normal" lay-event="word" shiro:hasPermission="plan_export">导出word文件</button>
    </div>
</script>

<table class="layui-hide" id="demo" lay-filter="test" lay-data="{id: 'idTest'}"></table>


<script th:src="@{/myconfig/layui/layui.js}"></script>

<script>
    /* 先获取ID 执行查询 */
    function queryPlanById(planId) {
        layui.use('table',function () {
            $.ajax({
                url: "plan/details",
                type: "get",
                data: {
                    "planId": planId
                },
                success: function (result) {
                    var planContent = result.data.planContent;
                    var planId = result.data.planId;
                    $("#modalPlanId").text(planId);
                    $("#modalPlanContent").text(planContent);
                    $('#updatePlanModal').modal("show");
                }
            });
        })
        //带着参数页面跳转
    }
    /** 查询工作计划详情 **/
    function queryPlanById2(planId) {
        layui.use('table',function () {
            $.ajax({
                url: "plan/details",
                type: "get",
                data: {
                    "planId": planId
                },
                success: function (result) {
                    alert(result);
                }
            });
        })
        //带着参数页面跳转
    }
    /* 修改工作计划内容 */
    function updatePlan() {
        var planId = $("#modalPlanId").text();
        var planContext = $("#modalPlanContent").val();
        layui.use('table',function () {
            $.ajax({
                url: "plan/update",
                type: "post",
                data: {
                    "planId": planId,
                    "planContent": planContext
                },
                success: function (result) {
                   if (result.data=="成功"){
                       $('#updatePlanModal').modal("hide");
                       layer.msg("修改成功");
                       setTimeout("location.reload()",1000);
                   }else {
                       layer.msg("修改失败");
                       setTimeout("location.reload()",1000);
                   }
                }
            });
        })
        //带着参数页面跳转

    }
</script>
<script th:inline="none">

    layui.config({
        version: '1554901098009' //为了更新 js 缓存，可忽略
    });

    layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider'], function(){
        var  laypage = layui.laypage //分页
            ,table = layui.table //表格
            ,form = layui.form
        //执行一个 table 实例
        var $ = layui.$;
        $.ajax({
            type: "get",
            url: 'plan/list' //数据接口, // 数据接口
            ,success: function (result) {
                var data = result.data;
                table.render({
                    elem: '#demo'
                    ,unresize: false
                    ,height: 630
                    ,id: 'idTest'
                    ,title: '项目表'
                    ,toolbar: '#testToolbar' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
                    ,data: data
                    ,cols: [[
                        {type: 'checkbox', fixed: 'left'}
                        ,{field: 'planId', title: '计划ID', width:140, sort: true,unresize: false}
                        ,{field: 'userName', title: '创建人', width:140,sort: true,unresize: false}
                        ,{field: 'planTypeName', title: '类型', width:140,sort: true,unresize: false}
                        ,{field: 'planTime', title: '创建时间', width:140,unresize: false, sort: true}
                        ,{field: 'departmentName', title: '关联部门', width:140,sort: true,unresize: false}
                        ,{field: 'planContent', title: '内容', width:350}
                        ,{field: 'planReleaseStatus', title: '发布状态', width:110}
                        ,{field: 'planStartTime', title: '开始时间', width:110}
                        ,{field: 'planEndTime', title: '结束时间', width:110}
                    ]] //设置表头
                    ,page:true
                    ,limits: [5, 10, 15,20] //每页显示个数
                    ,limit: 5 //每页默认显示的数量
                    ,group:5   //页码最多显示个数
                });
            }
        });

        form.on('submit(formSearch)',function (data) {
            var planDepartmentId = $("#departmentId").val();
            var planTypeId = $("#planTypeId").val();
            var planReleaseStatus = $("#planReleaseStatus").val();
            $.ajax({
                type: "get",
                url: 'plan/list' //数据接口, // 数据接口
                ,data: {
                    "planDepartmentId": planDepartmentId,
                    "planTypeId":planTypeId,
                    "planRelease":planReleaseStatus,
                }
                ,success: function (result) {
                    data = result.data;
                    table.render({
                        elem: '#demo'
                        ,unresize: false
                        ,height: 630
                        ,id: 'idTest'
                        ,title: '项目表'
                        ,toolbar: '#testToolbar' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
                        ,data: data
                        ,cols: [[
                            {type: 'checkbox', fixed: 'left'}
                            ,{field: 'planId', title: '计划ID', width:140, sort: true,unresize: false}
                            ,{field: 'userName', title: '创建人', width:140,sort: true,unresize: false}
                            ,{field: 'planTypeName', title: '类型', width:140,sort: true,unresize: false}
                            ,{field: 'planTime', title: '创建时间', width:140,unresize: false, sort: true}
                            ,{field: 'departmentName', title: '关联部门', width:140,sort: true,unresize: false}
                            ,{field: 'planContent', title: '内容', width:425}
                            ,{field: 'planReleaseStatus', title: '发布状态', width:110}
                            ,{field: 'planStartTime', title: '开始时间', width:110}
                            ,{field: 'planEndTime', title: '结束时间', width:110}
                        ]] //设置表头
                        ,page:true
                        ,limits: [5, 10, 15,20] //每页显示个数
                        ,limit: 5 //每页默认显示的数量
                        ,group:5   //页码最多显示个数
                    });
                }
            })
            return false;
        })

        //监听头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id)
                ,data = checkStatus.data; //获取选中的数据
            switch(obj.event){
                case 'addPlan':
                    layer.open({
                        type: 2 //此处以iframe举例
                        ,title: '添加工作计划'
                        ,area: ['600px', '500px']
                        ,shade: 0
                        ,maxmin: true
                        ,content: 'work_plan_add.html'
                        ,zIndex: layer.zIndex //重点1
                        ,success: function(layero){
                            layer.setTop(layero); //重点2
                        }
                    });
                    break;
                case 'word':
                    if(data.length === 0){
                        layer.msg('请选择一行');
                    }else if(data.length >1 ){
                        layer.msg('只允许选择一行');
                    } else {
                        layui.use('table',function () {
                            var planId = checkStatus.data[0].planId;
                            var $ = layui.$;
                            getWord(planId);
                        })
                    }
                    break;
                case 'update':
                    if(data.length === 0) {
                        layer.msg('请选择一行');
                    }else if(data.length >1 ){
                        layer.msg('只允许选择一行');
                    } else {
                        if(checkStatus.data != "") {
                            var data = checkStatus.data[0].planId;  //获取选中行数据中对应的 事项 ID（data为数组，data[0]为下标为0的数据）
                            var planId = JSON.stringify(data);
                            queryPlanById(planId);
                        }
                    }
                    break;
                case 'detail':
                    if(data.length === 0) {
                        layer.msg('请选择一行');
                    }else if(data.length >1 ){
                        layer.msg('只允许选择一行');
                    } else {
                        if(checkStatus.data != "") {
                            var data = checkStatus.data[0].planId;  //获取选中行数据中对应的 事项 ID（data为数组，data[0]为下标为0的数据）
                            var planId = JSON.stringify(data);
                            location.href="work_plan_detail.html?planId="+planId+"";
                        }
                    }
                    break;
                case 'delete':
                    if(data.length === 0){
                        layer.msg('请选择一行');
                    } else if(data.length >1 ){
                        layer.msg('只允许选择一行');
                    } else {
                        layui.use('table',function () {
                            var planId = checkStatus.data[0].planId;
                            var $ = layui.$;
                            $.ajax({
                                url: "plan/delete",
                                type: "post",
                                data: {
                                  'planId' : planId
                                },
                                success: function (result) {
                                    if(result.data=="成功"){
                                        layer.msg("删除成功");
                                        setTimeout("location.reload()",1000);
                                    }
                                }
                            });
                        })
                    }
                    break;
                case 'release':
                    if(data.length === 0){
                        layer.msg('请选择一行');
                    } else if(data.length >1 ){
                        layer.msg('只允许选择一行');
                    } else {
                        layui.use('table',function () {
                            var planId = checkStatus.data[0].planId;
                            var $ = layui.$;
                            $.ajax({
                                url: "plan/release",
                                type: "post",
                                data: {
                                    'planId' : planId
                                },
                                success: function (result) {
                                    if(result.data=="成功"){
                                        layer.msg("发布成功");
                                        setTimeout("location.reload()",1000);
                                    }
                                    if(result.msg=="失败"){
                                        layer.msg("已发布");
                                    }
                                }
                            });
                        })
                    }
                    break;
            };
        });
    });
</script>
<script>
    function getWord(planId){
        window.location.href = "plan/word?planId="+planId;
    }
</script>
<script>
    //查询所有事项的id

    function queryAllItem() {
        layui.use('table',function () {
            var $ = layui.$;
            $.ajax({
                url: "plan/department/list",
                type: "get",
                success: function (result) {
                    var selectId = document.getElementById("departmentId");
                    for (var i =0;i<result.data.length;i++){
                        var option1 =document.createElement("option");
                        option1.setAttribute("value",result.data[i].departmentId);
                        option1.innerText = result.data[i].departmentName;
                        selectId.appendChild(option1);
                        layui.form.render('select');
                    }
                }
            });
        })
    }
    queryAllItem();
</script>
</body>
</html>
